<template>
  <div>
    <div class="type_card">
      <div class="atype">
        <span class="atitle">地区：</span>
        <span class="types" :class="{active:area=='全部'}" @click="area='全部'">全部</span>
        <span class="types" :class="{active:area=='内地'}" @click="area='内地'">内地</span>
        <span class="types" :class="{active:area=='港台'}" @click="area='港台'">港台</span>
        <span class="types" :class="{active:area=='欧美'}" @click="area='欧美'">欧美</span>
        <span class="types" :class="{active:area=='日本'}" @click="area='日本'">日本</span>
        <span class="types" :class="{active:area=='韩国'}" @click="area='韩国'">韩国</span>
      </div>
      <div class="atype">
        <span class="atitle">类型：</span>
        <span class="types" :class="{active:type=='全部'}" @click="type='全部'">全部</span>
        <span class="types" :class="{active:type=='官方版'}" @click="type='官方版'">官方版</span>
        <span class="types" :class="{active:type=='原声'}" @click="type='原声'">原声</span>
        <span class="types" :class="{active:type=='现场版'}" @click="type='现场版'">现场版</span>
        <span class="types" :class="{active:type=='网易出品'}" @click="type='网易出品'">网易出品</span>
      </div>
      <div class="atype">
        <span class="atitle">排序：</span>
        <span class="types" :class="{active:order=='排序上升'}" @click="order='排序上升'">排序上升</span>
        <span class="types" :class="{active:order=='最热'}" @click="order='最热'">最热</span>
        <span class="types" :class="{active:order=='最新'}" @click="order='最新'">最新</span>
      </div>
    </div>
    <div class="newMv">
      <div class="items">
        <div class="item" v-for="(item,index) in mvList" :key="index">
          <div class="img_wrap" @click="toMv(item.id)">
            <img :src="item.cover" alt="">
            <span class="play_count"><i class="el-icon-caret-right"></i>{{item.playCount}}</span>
          </div>
          <div class="info_wrap">
            <p>{{item.name}}</p>
            <p class="song_artist">{{item.artistName}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="page_card">
      <el-pagination
          @current-change="currentPage"
          layout="prev, pager, next"
          :current-page="page"
          :page-size="16"
          :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "newMv",
        data(){
          return{
            mvList:[],
            area:'',
            type:'',
            order:'',
            page:1,
            total:0,
          }
        },
        methods:{
          getMv(){
            axios({
              url:'https://autumnfish.cn/mv/all',
              method:'get',
              params:{
                area:this.area,
                type:this.type,
                order:this.order,
                limit:16,
                offset:(this.page-1)*16,
              },
            }).then(response=>{
              //console.log(response);
              //接口问题，只有第一页有数据总数
              if(this.page==1)
              this.total=response.data.count;
              this.mvList=response.data.data;
            })
          },
          currentPage(tPage){
            this.page=tPage;
            this.getMv();
          },
          toMv(id){
            //传参数到MV
            this.$router.push(`/MV?id=${id}`);
          },

        },
      created() {
          this.getMv();
      },
      watch:{
          area(){
            this.page=1;
            this.getMv();
          },
          type(){
            this.page=1;
            this.getMv();
          },
          order(){
            this.page=1;
            this.getMv();
          }
      }
    }
</script>

<style scoped>
    img{
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }
    .type_card{
      position: relative;
      width: 90%;
      left: 5%;
      top:10px;
    }
    .atitle{
      width: 8%;
    }
    .atype{
      position: relative;
      display: flex;
      height: 30px;
      margin: 15px;
    }
    .types{
      color: grey;
      font-size: 16px;
      margin-right: 80px;
      cursor:pointer;
    }
    .types.active{
      color: crimson;
    }
    .newMv{
      position: relative;
      width:90%;
      left: 5%;
    }
    .newMv .items{
      display: flex;
      flex-wrap: wrap;
    }
    .newMv .item{
      width: 22%;
      margin: 10px;
    }
    .newMv .img_wrap{
      position: relative;
      width: 250px;
      height: 150px;
      cursor: pointer;
    }
    .newMv .info_wrap{
      text-align: center;
    }
    .newMv .play_count{
      background-image: linear-gradient(to right,rgba(255,0,0,0),rgba(58,58,10,1));
      position: absolute;
      right: 0;
      color: white;
    }
    .song_artist{
      color: grey;
      font-size:15px;
      margin-top: 5px;
    }
    .page_card{
      width: 90%;
      position: relative;
      left: 5%;
      text-align: center;
    }

</style>